<template>
    <div class="box">
        <div class="same">{{data.name}}</div>
        <div class="same" :class="data.state">{{data.id}}|{{data.state === 'run'?'运行':data.state === 'stop'?'未运行':'离线'}}</div>
        <div class="same" :class="(temperature==='高温超限'||temperature==='低温超限')?'light':''">
            <div class="itemsame">温度(<sup>o</sup>C)</div>
            <div class="itemsame">{{ data.temperature }}</div>
        </div>
        <div class="same" :class="(temperature==='高温超限'||temperature==='低温超限')?'light':''">
            <div class="itemsame">温度上下限(<sup>o</sup>C)</div>
            <div class="itemsame">{{data.lowerTemperatureLimits}}-{{data.upperTemperatureLimits}}</div>
        </div>
        <div class="same" :class="(temperature==='高温超限'||temperature==='低温超限')?'light':''">
            <div class="itemsame">温度是否超限</div>
            <div class="itemsame">{{temperature}}</div>
        </div>
        <hr style="border: 1px dashed rgb(255, 255, 255);;"/>
        <div class="same" :class="(humidity==='高湿度超限'||humidity==='低湿度超限')?'light':''">
            <div class="itemsame">湿度(RH)</div>
            <div class="itemsame">{{data.humidity}}</div>
        </div>
        <div class="same" :class="(humidity==='高湿度超限'||humidity==='低湿度超限')?'light':''">
            <div class="itemsame">湿度上下限</div>
            <div class="itemsame">{{data.lowerHumidityLimits}}-{{data.upperHumidityLimits}}</div>
        </div>
        <div class="same" :class="(humidity==='高湿度超限'||humidity==='低湿度超限')?'light':''">
            <div class="itemsame">湿度是否超限</div>
            <div class="itemsame">{{humidity}}</div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';

const temperature = ref('')
const humidity  = ref('')
const props = defineProps({
    data:{
        type: Object,
        defult:()=>{}
    }
})

const compute = ()=>{
    if(props.data.humidity<props.data.lowerHumidityLimits){
        humidity.value = '低湿度超限'
    }else if(props.data.humidity>props.data.upperHumidityLimits){
        humidity.value = '高湿度超限'
    }else{
        humidity.value = '否'
    }

    if (props.data.temperature<props.data.lowerTemperatureLimits) { 
        temperature.value = '低温超限'
    }else if(props.data.temperature>props.data.upperTemperatureLimits){
        temperature.value = '高温超限'
    }else{
        temperature.value = '否'
    }
}

compute()
</script>

<style scoped>
.run{
    background-color: #33CC00;
}
.stop{
    background-color: #336633;
}
.offline{
    background-color: #999999;
}
.light{
    color: #C60558;
}
.itemsame{
    flex: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.same{
    height: 20px;
    justify-content: center;
    display: flex;
    font-size: 12px;
}
.box{
    border: 1px solid rgb(42, 81, 152);
    width: calc((100% - 200px) / 5);
    height: 161px;
    position: relative;
    margin: 0 20px 10px 20px;
}
</style>